<template>
  <!-- 头部展示各个项目排队信息 -->
  <div style="height: 90vh; padding: 0 20px 20px 20px; width: 100%; font-weight: bold">
    <div
      style="
        position: relative;

        text-align: center;
        font-size: 24px;
      "
    >
      <span>医院排队系统</span>
      <el-button @click="logout" style="position: absolute; right: 0; top: 0">
        {{ $t("navbar.logout") }}
      </el-button>
    </div>
    <el-scrollbar max-height="100vh - 100px">
      <div class="projects-panel">
        <projects ref="projectsPane" />
      </div>
      <div v-if="showCheck">
        <el-button @click="assign">参加体检</el-button>
      </div>
      <div v-else style="margin: 20px 0">
        <div v-loading="loading">
          <!-- 中部展示自身待检项目 -->
          <div class="unCheck-panel" style="margin-bottom: 20px">
            <uncheck
              ref="uncheckPane"
              v-model:uncheck-list="uncheckList"
              @update-source="queryAll"
            />
          </div>
          <!-- 尾部展示自身在检项目 -->
          <div class="checking-panel" style="margin-bottom: 20px">
            <checking
              ref="checkingPane"
              v-model:checking-list="checkingList"
              @update-source="queryAll"
            />
          </div>
          <!-- 尾部展示自身已检项目 -->
          <div class="checked-panel">
            <checked ref="checkedPane" v-model:checked-list="checkedList" />
          </div>
        </div>
      </div>
      <div style="position: fixed; bottom: 10vh; right: 20px">
        <el-button size="large" @click="queryAll"
          ><el-icon size="large"><RefreshRight /></el-icon
        ></el-button>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import Projects from "./components/projects.vue";
import Uncheck from "./components/uncheck.vue";
import Checking from "./components/checking.vue";
import Checked from "./components/checked.vue";
import { ICheckProject } from "@/api/queue/types";
import {AssignProject, queryRecommendProject, QueryUserProject, queueProject} from "@/api/queue";
import { RefreshRight } from "@element-plus/icons-vue";
import { useUserStore } from "@/store/modules/user";

const userStore = useUserStore();

//----- 组件变量 --------
const projectsPane = ref<any>();
const uncheckPane = ref<any>();
const checkingPane = ref<any>();
const checkedPane = ref<any>();
const showCheck = ref(false);
const checkList = ref<ICheckProject[]>([]);
const uncheckList = ref<ICheckProject[]>([]);
const checkingList = ref<ICheckProject[]>([]);
const checkedList = ref<ICheckProject[]>([]);
const loading = ref(false);
const recommendProject = ref<ICheckProject>();

//----- 数据获取 --------

function logout() {
  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    userStore
      .logout()
      .then(() => {
        tagsViewStore.delAllViews();
      })
      .then(() => {
        router.push(`/login?redirect=${route.fullPath}`);
      });
  });
}

const queryAll = () => {
  queryProjects();
  projectsPane.value.queryProjectQueue();
  uncheckPane.value.queryRecommend();
};

const queryProjects = () => {
  loading.value = true;
  checkList.value = [];
  uncheckList.value = [];
  checkingList.value = [];
  checkedList.value = [];
  QueryUserProject()
    .then((res) => {
      checkList.value = res.data;
    })
    .finally(() => {
      checkList.value.forEach(function (e) {
        switch (e.finished) {
          case 0:
            uncheckList.value.push(e);
            break;
          case 1:
            checkedList.value.push(e);
            break;
          case 2:
            checkingList.value.push(e);
            break;
        }
      });
      if (checkList.value.length <= 0) {
        showCheck.value = true;
      }
      setTimeout(() => {
          loading.value = false;
          }, 500
      );
    });
};

onMounted(() => {
  queryProjects();
});
const queryRecommend = () => {
  queryRecommendProject().then((res) => {
    if (res) {
      recommendProject.value = res.data;
    }
  }).finally(() => {
    queueRecommend(recommendProject.value.sysDeptVO.id);
  });
};
const queueRecommend = (deptId: number) => {
  queueProject(deptId).then((res) => {
    if (res.data) {
      queryProjects();
      ElNotification({
        title: "提示",
        message: h("i", { style: "color: green" }, "已进行推荐项目排队!"),
      });
    } else {
      ElNotification({
        title: "提示",
        message: h("i", { style: "color: teal" }, "出现错误!"),
      });
    }
  }).finally(() => {
    loading.value = false;
  });
};
const assign = () => {
  AssignProject()
    .then((res) => {
      loading.value = true;
      showCheck.value = false;
    })
    .finally(() => {
      queryRecommend();
      loading.value = false;
    });
};
</script>

<style scoped lang="scss"></style>
